{%  extends 'base.html' %}

{% block title %} | Home {% endblock %}
{% block content %}
  {% load humanize %}

  {% load static %}

  <!-- Banner start -->
  <div class="banner" id="banner">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner banner-slider-inner text-center">
        <div class="carousel-item banner-max-height active item-bg">
          <img class="d-block w-100 h-100" src="{% static 'img/car-1.jpg' %}" alt="banner">
          <div class="carousel-content container banner-info-2 bi-2 text-left">
            <h3>Wow Factor Standard</h3>
            <h5>Allow us to guide you through the innovative stress<br>
              free approach in finding your dream car.</h5>
            <a href="{% url 'services' %}" class="btn btn-lg btn-theme">Read more</a>
          </div>
        </div>
        <div class="carousel-item banner-max-height item-bg">
          <img class="d-block w-100 h-100" src="{% static 'img/car-2.jpg' %}" alt="banner">
          <div class="carousel-content container banner-info-2 bi-2 text-left">
            <h3>Explore Your Dream Car</h3>
            <h5>Allow us to guide you through the innovative stress<br>
              free approach in finding your dream car.</h5>
            <a href="{% url 'services' %}" class="btn btn-lg btn-theme">Read more</a>
          </div>
        </div>
        <div class="carousel-item banner-max-height item-bg">
          <img class="d-block w-100 h-100" src="{% static 'img/car-3.jpg' %}" alt="banner">
          <div class="carousel-content container banner-info-2 bi-2 text-left">
            <h3>We Are Wheel</h3>
            <h5>Allow us to guide you through the innovative stress<br>
              free approach in finding your dream car.</h5>
            <a href="{% url 'services' %}" class="btn btn-lg btn-theme">Read more</a>
          </div>
        </div>
      </div>
      <!-- Search box 3 start -->
      <div class="search-box-4 sb-8">
        <form action="{% url 'search' %}" method="">
          <div class="form-group">
            <input type="text" name="keyword" placeholder="Search by name" class="form-control">
          </div>
          <div class="form-group">
            <select class="form-control search-fields" name="model">
              <option selected="true" disabled="disabled">Model</option>
              {% for model in model_search %}
                <option value="{{ model }}">{{ model }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group">
            <select class="form-control search-fields" name="city">
              <option selected="true" disabled="disabled">Location</option>
              {% for city in city_search %}
                <option value="{{ city }}">{{ city }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group">
            <select class="form-control search-fields" name="year">
              <option selected="true" disabled="disabled">Year</option>
              {% for year in year_search %}
                <option value="{{ year }}">{{ year }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group">
            <select class="form-control search-fields" name="body_style">
              <option selected="true" disabled="disabled">Select Type Of Car</option>
              {% for body_style in body_style_search %}
                <option value="{{ body_style }}">{{ body_style }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="range-slider clearfix">
            <label>Price</label>
            <div data-min="0" data-max="150000"  data-min-name="min_price" data-max-name="max_price" data-unit="USD" class="range-slider-ui ui-slider" aria-disabled="false"></div>
            <div class="clearfix"></div>
          </div>
          <div class="form-group">
            <button class="btn btn-block button-theme btn-md">
              <i class="fa fa-search"></i> Search
            </button>
          </div>
        </form>
      </div>
      <!-- Search box 3 end -->
      <a class="carousel-control-prev none-580" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="slider-mover-left" aria-hidden="true">
                <i class="fa fa-angle-left"></i>
            </span>
      </a>
      <a class="carousel-control-next none-580" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="slider-mover-right" aria-hidden="true">
                <i class="fa fa-angle-right"></i>
            </span>
      </a>
    </div>
  </div>
  <!-- Banner end -->

  <!-- Search box 2 end -->

  <!-- Featured car start -->
  <div class="featured-car content-area-5">
    <div class="container">
      <!-- Main title -->
      <div class="main-title">
        <h1>Featured <span>Cars</span></h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <!-- Slick slider area start -->
      <div class="slick-slider-area clearfix">
        <div class="row slick-carousel" data-slick='{"slidesToShow": 3, "responsive":[{"breakpoint": 1024,"settings":{"slidesToShow": 2}}, {"breakpoint": 768,"settings":{"slidesToShow": 1}}]}'>

          {% for car in featured_cars %}
            <div class="slick-slide-item">
              <div class="car-box-3">
                <div class="car-thumbnail">
                  <a href="{% url 'car_detail' car.id %}" class="car-img">
                    <div class="tag-2">Featured</div>
                    <div class="price-box">
                      <span>${{ car.price | intcomma }}</span>
                    </div>
                    <img class="d-block w-100" src="{{ car.car_photo.url }}" alt="car" style="min-height: 262px; max-height: 262px;">
                  </a>
                  <div class="carbox-overlap-wrapper">
                    <div class="overlap-box">
                      <div class="overlap-btns-area">
                        <div class="car-magnify-gallery">
                          <a href="{{ car.car_photo.url }}" class="overlap-btn">
                            <i class="fa fa-expand"></i>
                            <img class="hidden" src="{{ car.car_photo.url }}">
                          </a>
                          {% if car.car_photo1 %}
                            <a href="{{ car.car_photo1.url }}" class="overlap-btn">
                              <i class="fa fa-expand"></i>
                              <img class="hidden" src="{{ car.car_photo1.url }}">
                            </a>
                          {% endif %}
                          {% if car.car_photo2 %}
                            <a href="{{ car.car_photo2.url }}" class="hidden">
                              <img class="hidden" src="{{ car.car_photo2.url }}">
                            </a>
                          {% endif %}
                          {% if car.car_photo3 %}
                            <a href="{{ car.car_photo3.url }}" class="hidden">
                              <img class="hidden" src="{{ car.car_photo3.url }}">
                            </a>
                          {% endif %}
                          {% if car.car_photo4 %}
                            <a href="{{ car.car_photo4.url }}" class="hidden">
                              <img class="hidden" src="{{ car.car_photo4.url }}">
                            </a>
                          {% endif %}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="detail">
                  <h1 class="title">
                    <a href="{% url 'car_detail' car.id %}">{{ car.car_title }}</a>
                  </h1>
                  <div class="location">
                    <a href="{% url 'car_detail' car.id %}">
                      <i class="flaticon-pin"></i>{{ car.city }}
                    </a>
                  </div>
                  <ul class="facilities-list clearfix">
                    <li>{{ car.fuel_type }}</li>
                    <li>{{ car.miles | intcomma }} km</li>
                    <li>{{ car.transmission }}</li>
                    <li>{{ car.body_style }}</li>
                    <li>{{ car.color }}</li>
                    <li>{{ car.year }}</li>
                  </ul>
                </div>
              </div>
            </div>
          {% endfor %}

        </div>
        <div class="slick-btn">
          <div class="slick-prev slick-arrow-buton sab-4">
            <i class="fa fa-angle-left"></i>
          </div>
          <div class="slick-next slick-arrow-buton sab-3">
            <i class="fa fa-angle-right"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Featured car end -->

  <!-- Rent car start -->
  <div class="featured-car content-area">
    <div class="container">
      <!-- Main title -->
      <div class="main-title">
        <h1>Latest <span>Cars</span></h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="row">

        {% for car in all_cars %}
          <div class="col-lg-4 col-md-6">
            <div class="car-box">
              <div class="car-thumbnail">
                <a href="{% url 'car_detail' car.id %}" class="car-img">
                  <div class="tag">For Sale</div>
                  <img class="d-block w-100" src="{{ car.car_photo.url }}" alt="car" style="min-height: 262px; max-height: 262px;">
                  <div class="facilities-list clearfix">
                    <ul>
                      <li>
                        <span><i class="flaticon-way"></i></span>{{ car.miles | intcomma }} km
                      </li>
                      <li>
                        <span><i class="flaticon-calendar-1"></i></span>{{ car.year }}
                      </li>
                      <li>
                        <span><i class="flaticon-manual-transmission"></i></span>{{ car.transmission }}
                      </li>
                    </ul>
                  </div>
                </a>
                <div class="carbox-overlap-wrapper">
                  <div class="overlap-box">
                    <div class="overlap-btns-area">
                      <div class="car-magnify-gallery">
                        <a href="{{ car.car_photo.url }}" class="overlap-btn">
                          <i class="fa fa-expand"></i>
                          <img class="hidden" src="{{ car.car_photo.url }}">
                        </a>
                        {% if car.car_photo1 %}
                          <a href="{{ car.car_photo1.url }}" class="overlap-btn">
                            <i class="fa fa-expand"></i>
                            <img class="hidden" src="{{ car.car_photo1.url }}">
                          </a>
                        {% endif %}
                        {% if car.car_photo2 %}
                          <a href="{{ car.car_photo2.url }}" class="hidden">
                            <img class="hidden" src="{{ car.car_photo2.url }}">
                          </a>
                        {% endif %}
                        {% if car.car_photo3 %}
                          <a href="{{ car.car_photo3.url }}" class="hidden">
                            <img class="hidden" src="{{ car.car_photo3.url }}">
                          </a>
                        {% endif %}
                        {% if car.car_photo4 %}
                          <a href="{{ car.car_photo4.url }}" class="hidden">
                            <img class="hidden" src="{{ car.car_photo4.url }}">
                          </a>
                        {% endif %}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="detail">
                <h1 class="title">
                  <a href="{% url 'car_detail' car.id %}">{{ car.car_title }}</a>
                </h1>
                <div class="location">
                  <a href="{% url 'car_detail' car.id %}">
                    <i class="flaticon-pin"></i>{{ car.state }}, {{ car.city }}
                  </a>
                </div>
              </div>
              <div class="footer clearfix">
                <div class="pull-left ratings days">
                  <p class="cartype">{{ car.body_style }}</p>
                </div>
                <div class="pull-right">
                  <p class="price">${{ car.price | intcomma }}</p>
                </div>
              </div>
            </div>
          </div>
        {% endfor %}

      </div>
    </div>
  </div>
  <!-- Rent car end -->


  <!-- Our team start -->
  <div class="our-team content-area bg-grea-3">
    <div class="container">
      <!-- Main title -->
      <div class="main-title">
        <h1>Executive <span>Team</span></h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
      </div>
      <!-- Slick slider area start -->
      <div class="slick-slider-area clearfix">
        <div class="row slick-carousel" data-slick='{"slidesToShow": 4, "responsive":[{"breakpoint": 1024,"settings":{"slidesToShow": 2}}, {"breakpoint": 768,"settings":{"slidesToShow": 1}}]}'>

          {% for team in teams %}
            <div class="slick-slide-item">
              <div class="team-1">
                <div class="photo">
                  <a href="#">
                    <img src="{{ team.photo.url }}" alt="team-1" class="img-fluid">
                  </a>
                  <div class="social-list clearfix">
                    <a href="{{ team.facebook_link }}" target="_blank" class="facebook-bg"><i class="fa fa-facebook"></i></a>
                    <a href="{{ team.twitter_link }}" target="_blank" class="twitter-bg"><i class="fa fa-twitter"></i></a>
                    <a href="{{ team.google_plus_link }}" class="google-bg"><i class="fa fa-google"></i></a>
                  </div>
                </div>
                <div class="details">
                  <h4><a href="team-detail.html">{{ team.first_name }} {{ team.last_name }}</a></h4>
                  <h5>{{ team.designation }}</h5>
                </div>
              </div>
            </div>
          {% endfor %}

        </div>
      </div>
    </div>
  </div>
  <!-- Our team end -->

  <!-- Intro section start -->
  <div class="intro-section">
    <div class="container">
      <div class="row">
        <div class="col-lg-9 col-md-8 col-sm-12">
          <div class="intro-text">
            <h3>Do You Have Questions ?</h3>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-12">
          <a href="{% url 'contact' %}" class="btn btn-md">Get in Touch</a>
        </div>
      </div>
    </div>
  </div>
  <!-- Intro section end -->

  <!-- Car Overview Modal -->
  <div class="car-model-2">
    <div class="modal fade" id="carOverviewModal" tabindex="-1" role="dialog" aria-labelledby="carOverviewModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <div class="modal-title" id="carOverviewModalLabel">
              <h4>Explore Your Dream Car</h4>
              <h5><i class="flaticon-pin"></i> 123 Kathal St. Tampa City,</h5>
            </div>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row modal-raw">
              <div class="col-lg-6 modal-left">
                <div class="item active">
                  <img src="{% static 'img/car-13.jpg' %}" alt="best-car" class="img-fluid modalLabel-1">
                  <img src="{% static 'img/car-14.jpg' %}" alt="best-car" class="img-fluid modalLabel-2">
                  <div class="sobuz">
                    <div class="price-box" style="padding-bottom: 5px;">
                      <span class="del-2">$1050.00</span>
                    </div>
                    <div class="">
                      <a href="car-details.html" class="btn btn-md btn-round btn-theme">Convertible</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg-6 modal-right">
                <div class="modal-right-content">
                  <section>
                    <h3>Features</h3>
                    <div class="features">
                      <ul class="bullets">
                        <li>Cruise Control</li>
                        <li>Airbags</li>
                        <li>Air Conditioning</li>
                        <li>Alarm System</li>
                        <li>Audio Interface</li>
                        <li>CDR Audio</li>
                        <li>Seat Heating</li>
                        <li>ParkAssist</li>
                      </ul>
                    </div>
                  </section>
                  <section>
                    <h3>Overview</h3>
                    <ul class="bullets">
                      <li>Model</li>
                      <li>Year</li>
                      <li>Condition</li>
                      <li>Price</li>
                      <li>Audi</li>
                      <li>2020</li>
                      <li>Brand New</li>
                      <li>$178,000</li>
                    </ul>
                  </section>
                  <div class="description">
                    <h3>Description</h3>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>
                    <a href="car-details.html" class="btn btn-md btn-round btn-theme">Show Detail</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

{% endblock %}
